<template>
	<div class="join-main">
		<header>品牌认证申请信息</header>
		<div class="text-list clearfix"><p class="fl">*</p><input type="text" placeholder="品牌名称" value="妖精的口袋" class="fl"/></div>
		<div class="text-list clearfix"><p class="fl">*</p><input type="text" placeholder="品牌官网/店铺链接" value="https://yaojingdekoudai.tmall.com" class="fl"/></div>
		<div class="text-list clearfix"><input type="text" placeholder="新浪微博昵称" value="" class="fl"/></div>
		<div class="text-list clearfix"><p class="fl">*</p><input type="text" placeholder="手机号" value="13855545" class="fl"/></div>
		<div class="text-list clearfix"><input type="text" placeholder="微信号" value="" class="fl"/></div>
		<p class="add-picture">线上/线下店铺，商品等图片（至少三张）</p>
		<ul class="picturebar clearfix">
			<li class="fl"><img src="" class="picture-img"/><img src="../assets/image/close_gray@2x.png" class="close-icon"/></li>
			<li class="fl"><img src="" class="picture-img"/><img src="../assets/image/close_gray@2x.png" class="close-icon"/></li>
			<li class="fl"><img src="../assets/image/photo_release@2x.png" class="picture-img"/></li>
		</ul>
		<router-link id="" to=""><button type="submit" disabled class="disabled">提交</button></router-link>
	</div>
</template>
<script>
	import Vue from 'vue'
	export default {
		data () {return {}},
		name: 'app',
		methods:{

		}
	}
</script>
<style lang="scss">
.join-main{
	header{ width: 100%; height: 0.8rem; font-size: 0.28rem; text-indent: 0.3rem; line-height: 0.8rem; color: #999;}
	.text-list{
		padding:0 0.3rem; width: 6.9rem; height:0.96rem; border-bottom:1px solid #f4f5f5; background:#fff;
		p{padding: 0.36rem 0.04rem 0.48rem 0; height: 0.14rem; font-size: 0.28rem; line-height: 0.28rem; color: #ff365d;}
		input{display: block; width: 6.7rem; height: 0.96rem; border: 0; font-size: 0.28rem; line-height: 0.96rem; color: #333;}
		::-webkit-input-placeholder{color: #999; font-size: 0.28rem; line-height: 0.96rem; text-align: left;}
	}
	.add-picture{height: 0.28rem; padding:0.3rem; font-size: 0.28rem; line-height: 0.28rem; color: #333;}
	.picturebar{
		padding:0 0.3rem;
		li{
			width: 1.94rem; height:1.86rem; position:relative; margin-bottom:0.2rem;
			+li{ margin-left: 0.16rem;}
			.picture-img{ display: block; width: 1.8rem; height: 1.8rem; padding: 0.06rem 0.14rem 0 0;}
			.close-icon{display: block; width:0.29rem; height: 0.29rem; position: absolute; top:0; right: 0;}
		}
	}
	a{
		display: block; width: 100%; height: 0.98rem;
		button{display: block; width: 100%; height: 0.98rem; position: fixed; left: 0; bottom: 0; border: 0; font-size: 0.32rem; text-align: center; line-height: 0.98rem; color: #fffefe; background: linear-gradient(to right,#fe4a6b,#e8163f);}
		.disabled{background: #ddd;}
	}
}
</style>